<template>
  <div class="app-container">
    <el-card>
      <el-form ref="form" :rules="rules" :model="form" label-width="150px">
        <el-form-item label="银行名称" prop="codeId">
          <el-select style="width: 500px" v-model="form.codeId" placeholder="请选择">
            <el-option v-for="item in bankList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="错误代码" prop="title">
          <el-input maxlength="100" style="width: 500px" v-model="form.title" placeholder="请输入错误代码标题"></el-input>
        </el-form-item>

        <el-form-item label="发布平台：" prop="platformType">
          <el-checkbox-group v-model="form.platformType">
            <el-checkbox v-for="city in platformTypeList" :label="city.dictValue" :key="city.dictValue">{{
              city.dictLabel }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="错误代码原因" prop="described">
          <el-input maxlength="2000" type="textarea" style="width: 500px" v-model="form.described"
            placeholder="错误代码原因"></el-input>
        </el-form-item>
        <el-form-item label="发布头像">
          <el-select style="width: 500px" v-model="form.memberId" filterable placeholder="请选择回答的账号">
            <el-option v-for="item in userOptions" :key="item.id" :label="item.nickname" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="错误代码解决方案">
          <el-input :autosize="{ minRows: 2, maxRows: 4 }" maxlength="2000" type="textarea" style="width: 500px"
            v-model="form.content" placeholder="错误代码解决方案"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button v-debounce :disabled="isDetail" style="width: 100px" type="primary" size="small"
            @click="submitForm('form')">提交</el-button>
          <el-button style="width: 100px" size="small" @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { accountList } from "../../../../api/rank";
import { getBankList } from "@/api/system";
import { addToolLoans, getToolLoans, editToolLoans } from "@/api/tool";
export default {
  data() {
    return {
      form: {
        codeId: "",
        title: "",
        platformType: ['2'],
        described: "",
        content: "",
        memberId: "",
        toolType: 'error_code'
      },
      platformTypeList: [],
      bankList: [],
      userOptions: [],
      rules: {
        codeId: [{ required: true, message: "请选择银行", trigger: "blur" }],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        platformType: [
          { required: true, message: "请选择发布平台", trigger: "blur" },
        ],
        described: [
          { required: true, message: "请输入错误代码原因", trigger: "blur" },
        ],
        memberId: [
          { required: true, message: "请选择发布账号", trigger: "blur" },
        ],
        content: [
          {
            required: true,
            message: "请输入错误代码解决方案",
            trigger: "blur",
          },
        ],
      },
      isDetail: false
    };
  },
  async created() {
    this.getAnswerUser();
    this.platformTypeList = await this.$getDictData("platform_type");
    this.getBankList();
    if (this.$route.query.id) {
      this.$route.meta.title = "编辑错误代码";
      this.getInfo();
    }
    if (this.$route.query.id && this.$route.query.type == "detail") {
      this.isDetail = true
      this.$route.meta.title = "查看错误代码";
      this.getInfo();
    }
  },
  methods: {
    resetForm() {
      this.$router.go(-1);
    },
    getInfo() {
      getToolLoans(this.$route.query.id).then((res) => {
        res.data.platformType = res.data.platformType.split(",");
        this.form = Object.assign({}, res.data);
      });
    },
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          let data = Object.assign({}, this.form);
          data.platformType = data.platformType.join(",");
          if (this.form.id) {
            editToolLoans(data).then((res) => {
              this.$message({
                type: "success",
                message: "修改成功!",
              });
              this.$router.go(-1);
            });
          } else {
            addToolLoans(data).then((res) => {
              this.$message({
                type: "success",
                message: "添加成功!",
              });
              this.$router.go(-1);
            });
          }
        }

      });
    },
    getBankList() {
      getBankList().then((res) => {
        this.bankList = res.data;
      });
    },
    getAnswerUser() {
      accountList().then((res) => {
        this.userOptions = res.data;
      });
    },
  },
};
</script>

<style></style>
